<template>
	<view>
		<u-tabs :list="tabBars" line-width="60" :scrollable="false" :current="tabIndex" @change="tapTab"></u-tabs>
		<view class="content">
			<view class="top-first" v-if="tabIndex == 0">
				<view :class="isRecent == 1 ? 'active' : ''" @click="changeIsRecent(1)">
					{{ $t('inspection.taskPlan.recentTime') }}
				</view>
				<view :class="isRecent == 0 ? 'active' : ''" @click="changeIsRecent(0)">
					{{ $t('baseCommon.other.whole') }}
				</view>
			</view>
			<view class="top-seconed" v-if="tabIndex == 2">
				<view class="item-line">
					<view class="line-picker">
						<view class="picker-name">{{ $t('common.field.date') }}</view>
						<view class="picker-desc">
							<date-picker :showValue="params.planStartTime" @change="dateChange">
								{{ params.planStartTime || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
							</date-picker>
						</view>
					</view>
				</view>
				<view class="item-line">
					<view class="line-picker">
						<view class="picker-name">{{ $t('inspection.taskPlan.line') }}</view>
						<view class="picker-desc">
							<data-picker v-model="params.lineId" :range="lineArray" @change="pickerChange"></data-picker>
						</view>
					</view>
				</view>
				<!-- <view class="item-line">
					<view class="line-picker">
						<view class="picker-name">{{$t('inspection.taskExecute.actualStaffName')}}</view>
						<view class="picker-desc">
							<data-picker v-model="params.actualStaffId" :range="personArray" @change="pickerChange"></data-picker>
						</view>
					</view>
				</view> -->
			</view>

			<swiper :current="tabIndex"
				:class="tabIndex === 0 ? 'swiper-box' : tabIndex === 1 ? 'swiper-box1' : 'swiper-box2'" :duration="300"
				@change="changeTab">
				<template v-for="(tab, index) in tabBars">
					<swiper-item :key="index">
						<mescroll-item ref="mescrollItem" :i="index" :index="tabIndex" :params="params"
							@toInfo="toInfo"></mescroll-item>
					</swiper-item>
				</template>
			</swiper>

			<!-- <uni-popup ref="popup" type="center">
				<view class="popContent">
					<image class="closeImg" @click="closePop()" src="../../../static/images/icon/18.png" />
					<view class="title">{{$t('inspection.taskExecute.personnelAuthentication')}}</view>
					<view class="inputBox">
						<input v-model="userPassword" password="true" value="" />
					</view>
					<view class="mes">{{$t('inspection.message.enterAuthenticationPassword')}}</view>
					<view class="btnAll">
						<view @click="personSkip" class="btn tonext">{{$t('baseCommon.buttons.skip')}}</view>
						<view @click="personSure" class="btn sureBtn">{{$t('baseCommon.buttons.confirm')}}</view>
					</view>
				</view>
			</uni-popup> -->

			<uni-popup ref="receive" type="center">
				<view class="receiveContent">
					<view class="receiveTitle">{{ $t('baseCommon.message.tips') }}</view>
					<view class="receiveDesc">
						<view class="">{{ $t('inspection.message.receiveTask') }}</view>
					</view>
					<template v-if="actionItem.preparing">
						<view class="receiveTitle">{{ $t('inspection.taskPlan.inspPreparation') }}</view>
						<view class="receiveDesc">
							<view class="">{{ actionItem.preparing }}</view>
						</view>
					</template>

					<view class="receiveBtn">
						<view @click="receiveSure" class="btn sureBtn">{{ $t('baseCommon.buttons.confirm') }}</view>
						<view @click="receiveCancel" class="btn cancelBtn">{{ $t('baseCommon.buttons.cancel') }}</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import MescrollItem from "./components/listContent.vue"
import { login } from '@/api/platform/oauth.js'
import { getGateTask, getLineList, getExecutorList, getEquipmentRunState } from '@/api/business/inspect.js'
import { notice } from '@/utils/common.js'

export default {
	components: {
		MescrollItem
	},
	data() {
		return {
			tabIndex: 0,
			lineArray: [],
			personArray: [],
			tabBars: [
				{ name: this.$t('inspection.taskPlan.toCheck') },
				{ name: this.$t('inspection.taskPlan.checking') },
				{ name: this.$t('inspection.taskPlan.checked') }
			],
			isRecent: 1,
			userId: '',
			userPassword: '',
			actionItem: {},
			params: {
				planStartTime: '',
				lineId: '',
				actualStaffId: ''
			}
		}
	},
	onLoad() {
		this.userId = uni.getStorageSync("userId")
		this.params.isRecent = this.isRecent
		this.params.actualStaffId = this.userId
		this.getLineData();
		this.getChooisePersonData();

		// 业务操作日志
		this.$saveOpLog('query', 'insp_task', '')
	},
	onShow() {
		// 获得设备运行状态集合
		getEquipmentRunState().then(res => {
			if (res.code !== 0) {
				return
			}
			uni.setStorageSync("runstate", res.data)
		})
	},
	methods: {
		tapTab(e) {
			this.tabIndex = e.index
			if (this.tabIndex === 0) {
				this.params.isRecent = this.isRecent
			}
		},
		changeTab(e) {
			this.tabIndex = e.target.current
			if (this.tabIndex === 0) {
				this.params.isRecent = this.isRecent
			}
		},
		// 路线
		getLineData() {
			getLineList({ userId: this.userId }).then(res => {
				if (res.data) {
					res.data.forEach(item => {
						this.lineArray.push({
							value: item.lineId,
							label: item.lineName
						})
					})
				}
			})
		},
		// 执行人
		getChooisePersonData() {
			getExecutorList({ userId: this.userId }).then(res => {
				if (res.data) {
					res.data.forEach(item => {
						this.personArray.push({
							value: item.staffId,
							label: item.staffName
						})
					})
				}
			})
		},
		pickerChange() {
			this.$refs.mescrollItem[this.tabIndex].reload()
		},
		dateChange(e) {
			this.params.planStartTime = e
			this.$refs.mescrollItem[this.tabIndex].reload()
		},
		changeIsRecent(num) {
			this.isRecent = num
			this.params.isRecent = this.isRecent
			this.$refs.mescrollItem[this.tabIndex].reload()
		},
		closePop() {
			this.$refs.popup.close()
		},
		receiveSure() {
			this.$refs.receive.close()
			this.getGateTastFun()
		},
		receiveCancel() {
			this.$refs.receive.close()
		},
		personSkip() {
			uni.navigateTo({
				url: "/pages/business/inspect/inspectDetail?taskId=" + this.actionItem.taskId + "&notEdit=2"
			})
		},
		personSure() {
			let param = {
				captcha: "",
				password: this.userPassword,
				requestId: "",
				username: uni.getStorageSync('userAccount'),
			}
			login(param).then(res => {
				if (!res) {
					return
				}
				if (res.state == 200) {
					//验证成功下一步
					this.closePop();
					//领取任务
					this.getGateTastFun()
				} else {
					notice.toast(this.$t('inspection.message.passwordError'))
					this.userPassword = "";
				}
			})
		},
		getGateTastFun() {
			let param = {
				userId: this.userId,
				userName: uni.getStorageSync('userName'),
				taskId: this.actionItem.taskId
			}
			getGateTask(param).then(res => {
				if (res.code == 0) {
					notice.toast(this.$t('inspection.message.receiveSuccess'))
					// this.closePop()
					this.toDetailPage()
					this.reload(this.tabIndex)
				} else {
					// this.closePop()
					let that = this
					uni.showModal({
						title: that.$t('baseCommon.message.tips'),
						content: res.msg,
						success: function (res) {
							if (res.confirm) {
								that.reload(that.tabIndex)
							}
						}
					})
				}
			})
		},
		toDetailPage() {
			let item = this.actionItem
			let url = "/pages/business/inspect/inspectDetail?taskId=" + item.taskId + "&notEdit=" + this.tabIndex

			uni.navigateTo({
				url: url
			})
		},
		toInfo(item) {
			this.actionItem = item
			if (this.tabIndex == 0) {
				this.$refs.receive.open()
				// let that = this
				// uni.showModal({
				// 	title: that.$t('baseCommon.message.tips'),
				// 	content: that.$t('inspection.message.receiveTask'),
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			that.getGateTastFun()
				// 		}
				// 	}
				// })
			} else if (this.tabIndex == 1 || this.tabIndex == 2) {
				this.toDetailPage()
			}
		},
		reload(index) {
			this.$refs.mescrollItem[index].reload()
		}
	}
}
</script>

<style lang="scss">
.content {
	background-color: #F1F1F1;
}

.top-first {
	background-color: #FFF;
	height: 40px;
	border-top: 2px solid #eee;
	border-bottom: 2px solid #eee;
	font-size: 14px;
	color: #999;
	display: flex;
	align-items: center;

	view {
		flex: 1;
		text-align: center;
	}

	.active {
		color: #1e91e6;
	}
}

.top-seconed {
	background: white;
	color: #666666;
	border-top: 2px solid #eee;

	.item-line {
		border-bottom: 1px solid #eee;
		padding: 0 10px;
		line-height: 40px;
		font-size: 14px;

		.line-picker {
			display: flex;
			align-items: center;
		}

		.picker-name {
			width: 55px;
		}

		.picker-desc {
			padding-left: 10px;
		}
	}
}

.swiper-box {
	/* #ifdef H5 */
	height: calc(100vh - 132px);
	/* #endif */
	/* #ifdef APP-PLUS */
	height: calc(100vh - 88px);
	/* #endif */
}

.swiper-box1 {
	/* #ifdef H5 */
	height: calc(100vh - 88px);
	/* #endif */
	/* #ifdef APP-PLUS */
	height: calc(100vh - 44px);
	/* #endif */
}

.swiper-box2 {
	/* #ifdef H5 */
	height: calc(100vh - 170px);
	/* #endif */
	/* #ifdef APP-PLUS */
	height: calc(100vh - 126px);
	/* #endif */
}

.popContent {
	width: 300px;
	height: 250px;
	background: white;
	border-radius: 6px;
	z-index: 1;
	text-align: center;
	padding: 20px;

	.closeImg {
		position: absolute;
		top: -10px;
		right: -10px;
		width: 20px;
		height: 20px;
	}

	.title {
		font-size: 16px;
		padding-top: 8px;
		padding-bottom: 22px;
	}

	.inputBox {
		input {
			padding: 8px 20px;
			border-bottom: 1px solid #eee;
			text-align: left;
			color: rgb(30, 144, 230);
			font-size: 20px;
			letter-spacing: 16px;
		}
	}

	.mes {
		color: #666;
		font-size: 14px;
		line-height: 22px;
		padding: 22px 0;
	}

	.btnAll {
		display: flex;
		justify-content: space-between;

		.btn {
			width: 120px;
			height: 36px;
			line-height: 36px;
			border-radius: 5px;
			font-size: 14px;
		}

		.tonext {
			border: 1px solid #DFDFDF;
		}

		.sureBtn {
			background: #1E90E6;
			color: white;
		}
	}
}

.receiveContent {
	width: 300px;
	// height: 600rpx;
	background: white;
	border-radius: 6px;
	z-index: 1;
	text-align: center;
	padding: 0 20px;

	.receiveTitle {
		font-size: 16px;
		font-weight: bold;
		padding: 10px;
	}

	.receiveDesc {
		margin-bottom: 10px;
	}

	.receiveBtn {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;

		.btn {
			width: 120px;
			height: 40px;
			line-height: 40px;
			border-radius: 10rpx;
			font-size: 14px;
		}

		.cancelBtn {
			border: 1px solid #DFDFDF;
		}

		.sureBtn {
			background: #1E90E6;
			color: white;
		}
	}
}
</style>
